<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
        
        <title>jquery.showhide.js demo</title>
        
        <link href="demo.css" type="text/css" rel="stylesheet" media="all" />
        
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script>
        <script type="text/javascript" src="jquery.showhide.js"></script>
        
        <style type="text/css" media="screen">
            
            .hide {
                display: none;
            }
        
        </style>
    
        <script type="text/javascript">
        
            $(function() {
                
                // Basic example
                $('#example-1').showhide();
                
                // Declaring a custom target
                $('#example-2').showhide({
                    target_obj: '$(this).parent().next()'
                });
                
                
            }); 
        
        </script>
    
    </head>
    <body>
        <div id="container">
        
            <h1>jquery.showhide.js</h1>
            <p>
                <strong>Author</strong>: <a href="http://www.woodmanworld.com/" title="Visit Dana Woodman's website" target="_blank">Dana Woodman</a><br />  
                <strong>Version</strong>: 0.1<br />
                <strong>Licence</strong>: <a href="http://www.opensource.org/licenses/mit-license.php" title="View the MIT licence now" target="_blank">MIT</a>
            </p>
            <p>Comments and questions can be directed at <em>woodman.dana (at) gmail.com</em></p>
            
            
            <h2>Contents</h2>
            <ol>
                <li><a href="#intro" title="View the introduction">Introduction</a></li>
                <li><a href="#getting-started" title="View the getting started information">Getting started</a></li>
                <li><a href="#examples" title="View the examples">Examples</a></li>
                <li><a href="#config" title="View the configuration information">Configuration</a></li>
                <li><a href="#download" title="Download the code">Download</a></li>
                <li><a href="#compatability" title="Read about browser compatability">Compatability</a></li>
                <li><a href="#support" title="View support info">Support</a></li>
                <li><a href="#credits" title="View the credits">Credits</a></li>
            </ol>
            
            
            <h2 id="intro">Introduction</h2>
            <p>The showhide plugin is an advanced version of the jQuery "toggle" function. It adds in many useful options for controlling of a target element. The primary use is to show/hide a target HTML element by clicking on a "toggle" element (usually a link).</p>
            <p>The plugin allows you to:</p>
            <ul>
                <li>Show hide virtually any HTML element.</li>
                <li>Remember the state with a cookie.</li>
                <li>Change the text of the toggle element so it reflects the state of the target object (e.g. "Show form"/"Hide form").</li>
                <li>Autofocus on a form field after showing the target. Useful if you are showing/hidding an HTML form.</li>
            </ul>
            <p>The plugin is called showhide because that is what it is primarily intended for: showing/hidding of a target element. This does not mean, however, that you need to use it for showing/hidding elements. You could use it to toggle the style of a target element (not just hiding it).</p>
            
            
            <h2 id="getting-started">Getting started</h2>
            <p>Using showhide is fairly simple. The first step is to put this in the head of your page:</p>
            <pre>&lt;script&nbsp;type=&quot;text/javascript&quot;&nbsp;src=&quot;/path/to/jquery-latest.js&quot;&gt;&lt;/script&gt;&nbsp;
&lt;script&nbsp;type=&quot;text/javascript&quot;&nbsp;src=&quot;/path/to/jquery.showhide.js&quot;&gt;&lt;/script&gt;</pre>
            <p>Next, create your HTML. Here is an example of the bar minimum you need to use showhide (see <a href="#examples" title="View examples">Examples</a> for more uses):</p>
            <pre>&lt;p&gt;
    &lt;a href=&quot;#&quot; title=&quot;Toggle the span&quot; id=&quot;example-1&quot;&gt;Toggle&lt;/a&gt;
    &lt;span&gt;This can be toggled.&lt;/span&gt;
&lt;/p&gt;</pre>
            <p>Now add in the jQuery code to call the showhide plugin:</p>
            <pre>&lt;script type=&quot;text/javascript&quot;&gt;
&nbsp;&nbsp;&nbsp; $(function() {
        $('#example-1').showhide();
    });
&lt;/script&gt;</pre>
            <p>And then add in the CSS to hide the target object:</p>
            <pre>&lt;style type=&quot;text/css&quot;&gt;
    .hide { display: none; }
&lt;/style&gt;</pre>
            <p>... and you should be up and running.</p>
            
            
            <h2 id="examples">Examples</h2>
            
            <h4>Basic example</h4>
            <p>A simple inline toggle using no options. By default showhide will toggle the next element (e.g. <code>$(this).next()</code>) and will default the target object to be visible.</p>
            <h6>Example:</h6>
            <div class="example">
                <a href="#" title="Toggle the span" id="example-1">Toggle</a>
                <span><strong>This can be toggled.</strong></span>
            </div>
            <h6>HTML:</h6>
            <pre>&lt;p&gt;
    &lt;a href=&quot;#&quot; title=&quot;Toggle the span&quot; id=&quot;example-1&quot;&gt;Toggle&lt;/a&gt;
    &lt;span&gt;&lt;strong&gt;This can be toggled.&lt;/strong&gt;&lt;/span&gt;
&lt;/p&gt;</pre>
            <h6>jQuery:</h6>
            <pre>$('#example-1').showhide();</pre>
            
            <h4>Declaring a custom target</h4>
            <p>Use the <code>target_obj</code> option to set an object other than .</p>
            <h6>Example:</h6>
            <div class="example">
                <p><a href="#" title="Toggle the span" id="example-2">Toggle</a></p>
                <p><strong>This can be toggled.</strong></p>
            </div>
            <h6>HTML:</h6>
            <pre>&lt;p&gt;&lt;a href=&quot;#&quot; title=&quot;Toggle the span&quot; id=&quot;example-2&quot;&gt;Toggle&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;This can be toggled.&lt;/strong&gt;&lt;/p&gt;</pre>
            <h6>jQuery:</h6>
            <pre>&lt;script type=&quot;text/javascript&quot;&gt;
&nbsp;&nbsp;&nbsp; $(function() {<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; $('#example-2').showhide({<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; target_obj: '$('#example-2').parent().next()';
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; });
&nbsp;&nbsp;&nbsp; });
&lt;/script&gt;</pre>
            
            
            <h2 id="config">Configuration</h2>
            <p>showhide has many configuration options. The table below lists all the options available, what data type they are, their default and how to use them.</p>
            <table cellspacing="0" class="table">
                <thead>
                    <tr>
                        <th>Property</th>
                        <th>Type</th>
                        <th>Default</th>
                        <th>Description</th>
                    </tr>
                </thead>
                <tbody>
                    <tr class="odd">
                        <td>target_obj</td>
                        <td>string</td>
                        <td>null</td>
                        <td>
                            <p>A string that represents a jQuery object.</p>
                            <pre>$('#toggle').showhide({
    target_obj: '$('#target')';
});</pre>
                            <p>Another example, this time using a reference to "self" (e.g. the "#toggle" DOM element):</p>
                            <pre>$('#toggle').showhide({
    target_obj: '$(this).parent().next()';
});</pre>
                            <p>This will select the toggle element parent's nearest sibling.</p>
                            <p>Default object is the next object (e.g. <code>$(this).next()</code>).</p>
                        </td>
                    </tr>
                    <tr class="even">
                        <td>focus_target</td>
                        <td>DOM element</td>
                        <td>null</td>
                        <td>
                            <p>A DOM input element to automatically focus on after showing (e.g. use the JavaScript <code>.focus()</code> function on the input). This is used to automatically put the text cursors focus on a form field. For example, this will focus on an input field with the id of "id_title":</p>
                            <pre>$('#toggle').showhide({
    focus_target: $('#id_title');
});</pre>
                        </td>
                    </tr>
                    <tr class="odd">
                        <td>default_open</td>
                        <td>Boolean</td>
                        <td>true</td>
                        <td>
                            <p>Whether or not to show the target element by default. If <code>true</code>, show the target. If <code>false</code>, hide the target on DOM load.</p>
                            <p>If you enable cookies, the cookie value will override this.</p>
                        </td>
                    </tr>
                    <tr class="even">
                        <td>show_class</td>
                        <td>String</td>
                        <td>'show'</td>
                        <td>
                            <p>The CSS class to apply to the target element to show it.</p>
                        </td>
                    </tr>
                    <tr class="odd">
                        <td>hide_class</td>
                        <td>String</td>
                        <td>'hide'</td>
                        <td>
                            <p>The CSS class to apply to the target element to hide it.</p>
                        </td>
                    </tr>
                    <tr class="even">
                        <td>plus_class</td>
                        <td>String</td>
                        <td>'plus'</td>
                        <td>
                            <p>The CSS class to apply to the toggle element when the target is shown.</p>
                            <p>Useful if you want to apply a "plus"/"minus" image to the toggle element VIA CSS.</p>
                        </td>
                    </tr>
                    <tr class="odd">
                        <td>plus_text</td>
                        <td>String</td>
                        <td>null</td>
                        <td>
                            <p>The text to replace the toggle elements text with when shown.</p>
                            <p>Useful if you want the text to change when the user clicks the toggle object (e.g. "Show form"/"Hide form").</p>
                        </td>
                    </tr>
                    <tr class="even">
                        <td>minus_class</td>
                        <td>String</td>
                        <td>'minus'</td>
                        <td>
                            <p>The CSS class to apply to the toggle element when the target is hidden.</p>
                            <p>Useful if you want to apply a "plus"/"minus" image to the toggle element VIA CSS.</p>
                        </td>
                    </tr>
                    <tr class="odd">
                        <td>minus_text</td>
                        <td>String</td>
                        <td>null</td>
                        <td>
                            <p>The text to replace the toggle elements text with when hidden.</p>
                            <p>Useful if you want the text to change when the user clicks the toggle object (e.g. "Show form"/"Hide form").</p>
                        </td>
                    </tr>
                    <tr class="even">
                        <td>use_cookie</td>
                        <td>Boolean</td>
                        <td>false</td>
                        <td>
                            <p>Indicates whether or not to store the user's choice in a cookie.</p>
                            <p>This is useful if you want user's to be able to set their preferences of hidden/visible elements.</p>
                            <p><strong>NOTE</strong>: To use the cookie feature, you need to include the <a href="http://plugins.jquery.com/project/Cookie" title="View the jQuery Cookie plugin page" target="_blank">jQuery Cookie plugin</a> on your page.</p>
                        </td>
                    </tr>
                    <tr class="odd">
                        <td>cookie_expires</td>
                        <td>Number</td>
                        <td>365</td>
                        <td>
                            <p>Number of days before cookie should expire.</p>
                        </td>
                    </tr>
                    <tr class="even">
                        <td>cookie_name</td>
                        <td>String</td>
                        <td>'show_target'</td>
                        <td>
                            <p>The name of the cookie to store.</p>
                            <p><strong>NOTE</strong>: This must be unique for every instance of showhide so there is no conflict of cookie values.</p>
                        </td>
                    </tr>
                </tbody>
            </table>
            
            <h2 id="download">Download</h2>
            <p>
                Downloads are available VIA Google Code here:<br />
                <a href="http://code.google.com/p/jquery-showhide/downloads/list" title="View the downloads page">http://code.google.com/p/jquery-showhide/downloads/list</a>
            </p>
            
            
            <h2 id="compatability">Compatability</h2>
            <p>showhide should be compatable with the following browsers:</p>
            <ul>
                <li>Firefox 2+</li>
                <li>Internet Explore 6+</li>
                <li>Opera 8+</li>
                <li>Safari 3+</li>
                <li>Google Chrome</li>
            </ul>
            <p>If you find a browser bug or issue, please contact me at <em>woodman.dana (at) gmail.com</em> and let me know about it.</p>
            
            <h2 id="support">Support</h2>
            <p>Please email me at <em>woodman.dana (at) gmail.com</em> for help.</p>
            <p>For general jQuery help, check out the <a href="http://groups.google.com/group/jquery-en" title="Visit the jQuery Google group" target="_blank">Google Group</a>.</p>
            
            
            <h2 id="credits">Credits</h2>
            <p>Written by Dana Woodman: <em>woodman.dana (at) gmail.com</em></p>
            
            
        </div>
    </body>
</html>